/**
*
* @description : 零售户信息列表
* @descriptionDetail : 零售户信息列表
* @copyright : 浙江烟草
* @author : dw
* @create : 2022-11-05 10:10:13
*/
<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" backText="返回" title="零售户列表" :custom-back="goBack"></theme-navbar>
		<!-- #endif -->
		<view class="nolicence-search-lay" :style="{'top': isHideNav ? 0 : '44px'}">
			<u-search shape="round" :clearabled="true" :showAction="true" actionText="确定" :animation="true" placeholder="许可证、企业字号、持证人、地址、电话等" v-model="keyword" @custom="handlerSearch"></u-search>
		</view>
		<view class="content-list">
			<me-table :i="0" :top="108" :index="0" :load-data="loadData" :init-load="false" ref="mescrollItem0">
				<view class="re-list" slot-scope="d">
					<view class="re-content">
						<view class="re-manager" @click="viewRetailerDetail(d.data)">
							<text class="re-title">
								{{ d.data.companyName }}
							</text>
							<u-tag style="flex-shrink: 0; height: fit-content" :spStyle="getSpStyle(d.data)" v-if="d.data.licStatus" mode="dark" shape="circle" :text="d.data.licStatusName"></u-tag>
							<text class="re-tit"></text>
						</view>
						<view class="re-subtitle">
							{{ d.data.businessAddr }}
						</view>
						<view class="re-icon">
							<u-row style="width: 100%">
								<u-col span="4" style="padding-left: 0px">
									<u-icon :label="d.data.managerName || ''" size="30" name="/static/check/manager.png"></u-icon>
								</u-col>
								<u-col span="6">
									<u-icon :label="d.data.retailTel || ''" size="30" name="phone" @click="modelConfirm(d.data.retailTel)"></u-icon>
								</u-col>
							</u-row>
						</view>
						<view class="re-icon">
							<u-row style="width: 100%">
								<u-col span="4" style="text-align: left">
									<u-tag style="flex-shrink: 0; height: fit-content" mode="dark" shape="circle" text="走 访" @click.native="goInterview(d.data)"></u-tag>
								</u-col>
								<u-col span="4" style="text-align: center">
									<u-tag style="flex-shrink: 0; height: fit-content" mode="dark" shape="circle" text="元春攻坚走访" @click.native="brandClick(d.data)"></u-tag>
								</u-col>
								<u-col span="4" style="text-align: right">
									<u-tag style="flex-shrink: 0; height: fit-content" mode="dark" shape="circle" text="标 签" @click.native="labelClick(d.data)"></u-tag>
								</u-col>
							</u-row>
						</view>
						<!-- 提示框 modelContent -->
						<u-modal v-model="modelShow" :content="modelContent" @confirm="doPhoneNew(d.data.retailTel)"></u-modal>
					</view>
				</view>
			</me-table>
		</view>
	</view>
</template>

<script>
	import MeTable from '@/components/me-table.vue';
	import {
		AMapMixin,
	} from '@/common/AMapMixin.js';
	import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js';
	import certificateService from '@/service/certificate/certificate.service.js';
	import checkService from '@/service/check/check.service';
	import {
		L_LIC_STATUS,
	} from '@/service/query/mapping/enum.js';
	import {
		SET_MAP_LAT_LON,
	} from '@/config/setting.config.js';
	const sysCodeColors = {
		'07': {
			color: '#EC7C37',
			borderColor: '#EC7C37',
			backgroundColor: '#FBE2D3',
		},
		'04': {
			color: '#01A79A',
			borderColor: '#01A79A',
			backgroundColor: '#C0ECE2',
		},
		'01': {
			color: '#AC0000',
			borderColor: '#AC0000',
			backgroundColor: '#F2CCCC',
		},
		'06': {
			color: '#FF9E2C',
			borderColor: '#FF9E2C',
			backgroundColor: '#FFF3E6',
		},
		'08': {
			color: '#0079F2',
			borderColor: '#0079F2',
			backgroundColor: '#E0ECFF',
		},
		'02': {
			color: '#717579',
			borderColor: '#717579',
			backgroundColor: '#EDEEEF',
		},
		'05': {
			color: '#20AB5C',
			borderColor: '#20AB5C',
			backgroundColor: '#DBF4E6',
		},
		'03': {
			color: '#FF9E2C',
			borderColor: '#FF9E2C',
			backgroundColor: '#FFF3E6',
		},
	};
	export default {
		components: {
			MeTable,
		},
		mixins: [MescrollMoreMixin, AMapMixin, ],
		data() {
			return {
				modelShow: false,
				modelContent: '',
				keyword: '',
				longitude: '',
				latitude: '',
				tels: [],
				isInterview: "",
				user: this.$storage.get(this.$rp.common.USER),
				retailData: [],
				firstNoLoad: false,
			};
		},
		onLoad(options) {
			this.isInterview = options.isInterview;
		},
		methods: {
			goInterview(row) {
				this.$u.route('pages/interview/visit/inspect', {
					retailerUuid: row.retailerUuid,
					taskSubject: '01' // 01是零售户 02是无证户
				});
			},
			initAmap() {},
			handlerSearch() {
				if (this.$u.test.isEmpty(this.keyword)) {
					this.$u.toast('请输入关键字');
					return;
				}
				this.$refs['mescrollItem0'].refresh();
			},
			getSpStyle(it) {
				if (it.licStatus == L_LIC_STATUS.SHUT_STATUS) {
					return sysCodeColors[it.licStatus] || {};
				} else if (it.licStatus == L_LIC_STATUS.ORDER_SHUT_STATUS) {
					return sysCodeColors[it.licStatus] || {};
				} else if (it.licStatus == L_LIC_STATUS.CANCEL_STATUS) {
					return sysCodeColors[it.licStatus] || {};
				} else if (it.licStatus == L_LIC_STATUS.CLOSE_STATUS) {
					return sysCodeColors[it.licStatus] || {};
				} else if (it.licStatus == L_LIC_STATUS.WITHDRAW_STATUS) {
					return sysCodeColors[it.licStatus] || {};
				} else if (it.licStatus == L_LIC_STATUS.REVOKE_STATUS) {
					return sysCodeColors[it.licStatus] || {};
				} else if (it.licStatus == L_LIC_STATUS.RECALL_STATUS) {
					return sysCodeColors[it.licStatus] || {};
				} else if (it.licStatus == L_LIC_STATUS.NORMAL_STATUS) {
					return sysCodeColors[it.licStatus] || {};
				}
			},
			// 零售户列表数据查询
			loadData(page) {
				// this.longLatit()
				let self = this;
				let param = {
					keyWord: this.keyword,
				};
				return new Promise((resolve) => {
					this.longLatit().then(() => {
						// if (!this.firstNoLoad) {
						//   this.firstNoLoad = true;
						//   resolve({
						//     count: 0,
						//     data: [],
						//   });
						//   return;
						// }
						param.licStatus = ['01', '02', '10', ];
						certificateService
							.getRetailerListByApp(page.num, page.size, param)
							.then((res) => {
								if (res.success) {
									resolve({
										count: res.count,
										data: [...res.data, ],
									});
								} else {
									resolve({
										count: 0,
										data: [],
									});
								}
							})
							.catch((e) => {
								resolve({
									count: 0,
									data: [],
								});
							});
					});
				});
			},
			longLatit() {
				let self = this;
				return new Promise((resolve) => {
					if (this.$deviceApi.geolocation) {
						this.$deviceApi.geolocation().then((res) => {
							self.longitude = res.longitude;
							self.latitude = res.latitude;
							resolve();
						});
					} else {
						self.longitude = SET_MAP_LAT_LON[0];
						self.latitude = SET_MAP_LAT_LON[1];
						resolve();
					}
				});
			},
			// 查看零售户详情
			viewRetailerDetail(retailer) {
				this.$u.route('pages/retailer/retailerInfo/retailerInfo', {
					retailerUuid: retailer.retailerUuid,
					licNo: retailer.licNo,
				});
			},
			// 电话显示
			handlerShowPhone(e, retailerUuid) {
				this.$u.loading('查询中...');
				this.tels = [];
				checkService.retailerTels(retailerUuid).then((dr) => {
					this.$u.hideLoading();
					if (dr.success) {
						let telDatas = dr.data;
						telDatas.forEach((t) => {
							t.tel && this.tels.push(t.name + ' ' + t.tel);
						});
						uni.showActionSheet({
							itemList: this.tels,
							itemColor: '#007aff',
							success: ({
								tapIndex,
							}) => this.doPhone(this.tels[tapIndex]),
						});
					}
				});
			},
			// 拨打电话
			doPhone(telStr) {
				let tel = telStr.substring(telStr.indexOf(' '));
				this.$deviceApi.makePhoneCall(tel);
			},
			// 拨打电话
			doPhoneNew(telStr) {
				if (this.$u.test.isEmpty(telStr)) return;
				// #ifdef H5-DINGDING
				this.$deviceApi.makePhoneCall(telStr);
				// #endif
				// #ifndef H5-DINGDING
				this.$u.toast('H5不支持打电话');
				// #endif
			},
			modelConfirm() {
				this.modelShow = true;
				this.modelContent = '是否打给零售户';
			},
			// 标签
			labelClick(item){
				this.setRouteParam(item);
				this.$u.route('/pages/score/label');
			},
			// 品牌
			brandClick(item){
				this.setRouteParam(item);
				this.$u.route('/pages/score/lnBrand');
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import 'style/certificate/common.scss';

	.page {
		padding: 0;
	}

	.content-list {
		background-color: #f3f4f5;
	}

	.nolicence-search-lay {
		background-color: #fff;
		position: fixed;
		// #ifndef H5-DINGDING
		top: 44px;
		// #endif
		// #ifdef H5-DINGDING
		top: 0px;
		// #endif
		z-index: 999;
		width: 100%;
		overflow: hidden;
		padding: $cm-search-padding-row $cm-search-padding-column;
	}

	.re-list {
		margin: 20rpx;
		color: #666666;
		font-size: 15px;
		border-bottom: 1px solid #e9e9e9;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		-webkit-flex-direction: row;
		background-color: #fff;
		border-radius: 12px;
		padding: 12px;
	}

	.re-media {
		padding-right: 10px;
		vertical-align: middle;
	}

	.re-content {
		width: 100%;

		.re-manager {
			display: flex;
			justify-content: space-between;

			.re-title {
				width: calc(90%);
				font-size: 15px;
				color: #666;
				font-weight: 600;
				margin-bottom: 5px;
				width: 80%;
			}
		}

		.re-subtitle {
			padding-top: 5px;
			color: #666;
		}

		.re-icon {
			display: flex;
			padding-top: 10px;
		}
	}

	/deep/.u-line {
		flex-shrink: 0;
	}
</style>
